<!--年度环境标准化通报 en_std_ann_report  annualReport-->
<template>
    <Layout>
        <Form ref="queryForm" :model="dataToQuery" :label-width="120">
            <Row v-show="!switchFlag" class="query-form">
                <!--<Col span="8">-->
                    <!--<FormItem label="企业名称：" prop="belongOrgId">-->
                        <!--<cascader-dom class="query-form-el" ref='queryOrgCascader' @setOrgInfo='setQueryCompanyName' :orgTree="true" :setCurrentName="{label:dataToQuery.companyName,value:dataToQuery.companyId}"></cascader-dom>-->
                    <!--</FormItem>-->
                <!--</Col>-->
                <Col span="8">
                    <FormItem label="年度：" prop="year" >
                        <DatePicker class="query-form-el" type="year" v-model="dataToQuery.year1" :clearable="false"
                                    @on-change="()=>{if(dataToQuery.year1 instanceof Date){dataToQuery.year = dataToQuery.year1.getFullYear().toString()}}"></DatePicker>
                    </FormItem>
                </Col>
                <Col span="8" :offset="8">
                    <Button @click="reset" class="ivu-btn-reset"  >重置</Button>
                    <Button type="primary" class="ivu-btn-query"   icon="md-search"  @click="query">查询</Button>
                </Col>
            </Row>
            <Row class="query-form">
                <Col span="24">
                    <Button size="large"  class="ivu-btn-add" icon="md-add"  @click="addInfo">新增</Button>
                </Col>
            </Row>
        </Form>
        <Table ref='table' :height="tableHeight"  no-data-text="没有查询到相关数据!" @on-selection-change = 'getSelectRows'
               border :columns="columns1"  :data="dataTable" >
        </Table>
        <Row style="margin-right:10px;">
            <Col span="24" >
                <Page style="float: right" :total="pagedata.total" :page-size="pagedata.pageSize" @on-change="pageChange" @on-page-size-change="pageSizeChange" :page-size-opts="pageSizeArray" show-total show-sizer show-elevator />
            </Col>
        </Row>
        <Modal :title="mode ==='view'? '年度环境标准化通报详情':'年度环境标准化通报'" :transfer=false :mask-closable="false" v-model="dialogShow" v-if="dataToView && dialogShow" :width=650 :styles="{height:'auto'}"  class-name='limit-height-dialog' >
            <Row>
                <Col span="24">
                    <Form ref="dialogForm" :class="mode === 'view'?'modal-view-detail':'modal-form'" :show-message="false" :model="dataToView" :rules="mode === 'view'?{} :ruleCustom"  :label-position="mode === 'view'?'right':'top'" :label-width="mode === 'view'?120:null">
                        <Row type="flex" justify="space-around" class="code-row-bg">
                            <Col span="11" >
                                <FormItem label="通报年度：" prop="year" >
                                    <div v-if="mode === 'view'">{{dataToView.year}}</div>
                                    <DatePicker v-else type="year" placeholder="请输入" v-model="dataToView.yearDate"></DatePicker>
                                </FormItem>
                            </Col>
                            <Col span="11" >
                                <FormItem label="要求整改完成时间：" prop="rectifyTime" >
                                    <div v-if="mode === 'view'">{{this.renderViewDate(dataToView.rectifyTime)}}</div>
                                    <DatePicker v-else :options="options1" v-model="dataToView.rectifyTime" type="date" placeholder="请输入" ></DatePicker>
                                </FormItem>
                            </Col>
                        </Row>
                        <Row type="flex" justify="space-around" class="code-row-bg">
                            <Col span="23">
                                <FormItem v-if="mode === 'view'" label="通报文件：">
                                    <div v-show="dataToView.idFiles.length>0" v-for="(item,index) in dataToView.idFiles" :key='index'>
                                        <a @click="downloadFiles(item,index)"><span style="color: #3399ff;margin-left: 5px">{{ item.fileName }}</span></a>
                                      <Progress  v-show="uploadListVisible[index]" :percent="uploadListPercent[index]"></Progress>
                                    </div>
                                </FormItem>
                                <FormItem v-else label="通报文件：">
                                    <div>
                                        <Upload ref="upload"
                                                :before-upload="(file) => { beforeUpload(file, 'id') }"
                                                :show-upload-list="true"
                                                :max-size="10240"
                                                multiple
                                                type="drag"
                                                :action="fileUrl">
                                            <div style="padding: 10px">
                                                <Icon type="ios-cloud-upload" size="45" style="color: #3399ff"></Icon>
                                                <p>点击将文件拖拽到这里上传</p>
                                                <span style="font-size:8px;color: #797a64">支持扩展名：.rar .zip .doc .docx .pdf...</span>
                                            </div>
                                        </Upload>
                                    </div>
                                    <div v-show="dataToView.idFiles.length>0" v-for="(item,index) in dataToView.idFiles" :key='index'>
                                        <a @click="downloadFiles(item,index)">{{ item.fileName }}</a>
                                        <Button type="text" icon="md-trash" @click="removeFile(item.id, 'id')" style="margin-left: 5px;margin-bottom: 3px"/>
                                      <Progress  v-show="uploadListVisible[index]" :percent="uploadListPercent[index]"></Progress>
                                    </div>
                                </FormItem>
                            </Col>
                        </Row>
                        <Row type="flex" justify="space-around" class="code-row-bg">
                            <Col span="23" >
                                <FormItem label="要求描述：" prop="notes" >
                                    <div v-if="mode === 'view'">{{dataToView.notes}}</div>
                                    <Input v-else v-model="dataToView.notes" type="textarea" :rows="2" />
                                </FormItem>
                            </Col>
                        </Row>
                        <Row type="flex" justify="space-around" class="code-row-bg">
                            <Col span="11">
                                <FormItem label='填报人：' prop='registrant'>
                                    <div v-if="mode === 'view'">{{dataToView.createUserName}}</div>
                                    <Input class="query-form-el" v-else type='text' v-model='dataToView.createUserName' readonly></Input>
                                </FormItem>
                            </Col>
                            <Col span="11">
                                <FormItem label='填报时间：' prop='registTime'>
                                    <div v-if="mode === 'view'">{{renderViewDate(dataToView.registranTime)}}</div>
                                    <DatePicker v-else type="date" placeholder="请选择日期" class="query-form-el" v-model='dataToView.registranTime' readonly></DatePicker>
                                </FormItem>
                            </Col>
                        </Row>
                        <Row type="flex" justify="space-around" class="code-row-bg">
                            <Col span="11">
                                <FormItem label='填报人手机号：' prop='registrantPhone'>
                                    <div v-if="mode === 'view'">{{dataToView.registrantPhone}}</div>
                                    <Input class="query-form-el" v-else type='text' v-model='dataToView.registrantPhone'></Input>
                                </FormItem>
                            </Col>
                            <Col span="11">
                            </Col>
                        </Row>
                    </Form>
                </Col>
            </Row>
            <div slot="footer">
                <Button v-if="mode != 'view'" type="primary" :loading="pageStatus.sending" class='ivu-btn-save' @click="submit('dialogForm')" >确定</Button>
                <Button v-if="mode != 'view'" type="primary"  class='ivu-btn-cancel' @click="handleCancel" >取消</Button>
                <Button v-if="mode === 'view'" class='ivu-btn-save' @click="dialogShow=false">关闭</Button>
            </div>
        </Modal>
    </Layout>
</template>

<script>
    import {Api} from '@/api/index.js'
    var cascaderDom = () => import('@/components/cascader-dom.vue');
    import pageCommonFunction from '@/components/pageCommonFunction.js'
    export default {
        name: "AnnReport",
        components:{
            cascaderDom
        },
        data(){
            return{
                ...this.createCommonDataField(),
                options1: {
                    disabledDate (date) {
                        return date && date.valueOf() < Date.now() - 86400000;
                    }
                },
                fileUrl:Api.interestedPartiesUserFile,
                downloadUrl:Api.downloadMongoFile,
                columns1: [
                    { title: '序号', width: 80, fixed: 'left', align: 'center', render: pageCommonFunction.indexColumnsRender.bind(this)},
                    {
                        title: '年度',
                        minWidth: 100,
                        align: 'center',
                        key:'year',
                    },
                    {
                        title: '要求整改完成时间',
                        minWidth: 120,
                        align: 'center',
                        key:'rectifyTime',
                        render: this.renderCellDate
                    },
                    {
                        title: '要求描述',
                        minWidth: 200,
                        align: 'center',
                        key:'notes',
                        tooltip:true
                    },
                    {
                        title: '填报人',
                        minWidth: 100,
                        align: 'center',
                        key:'createUserName'
                    },
                    {
                        title: '填报时间',
                        minWidth: 100,
                        align: 'center',
                        key:'registranTime',
                        render: this.renderCellDate
                    },
                    this.getActionColumns()
                ],
                ruleCustom : {
                    registrantPhone: [{
                        validator: (rule, value, callback) => {
                            if(!(/^1[3456789]\d{9}$/.test(this.dataToView.registrantPhone))){
                                callback(' ');
                            } else {
                                callback()
                            }
                        },
                        required: true,
                        trigger: 'blur'
                    }],
                },
                // api
                queryUrl:Api.queryAnnReport,
                deleteUrl:Api.deleteAnnReport,
                updateUrl:Api.updateAnnReport,
                saveUrl:Api.saveAnnReport,
            }
        },
        mounted() {
            this.dataToQuery.year1 = new Date()
            this.dataToQuery.year = new Date().getFullYear().toString()
            this.setTableHeight();
            this.query();
        },
        methods:{
            ...pageCommonFunction,
            deleteData(params) {
                this.deleteDateAjax(params);
            },
            query() {
                // if(this.dataToQuery.year) {
                //     this.dataToQuery.year = this.dataToQuery.year.getFullYear();
                // }
                this.queryAjax()
            },
            submit(name) {
                if(this.dataToView.yearDate) {
                    this.dataToView.year = this.dataToView.yearDate.getFullYear();
                }
                this.submitAjax(name);
            },
            createEmptyDataToAdd() {
                return {
                    id:this.get_uuid(),
                    idFiles:[],
                    registranTime:new Date(),
                    yearDate:new Date(),
                    createUserName:this.currentUser.userName
                }
            },
            async beforeEditDialogOpen(data) {
                data.row.yearDate = new Date(data.row.year + '-01-01');
            },
            async afterDataToViewInit() {
                await this.getFiles('id');
            }
        },
        watch:{
        },

    }
</script>

<style lang='css' scoped>
    .ivu-form-item {
        padding-right: 20px;
    }

    .query-form-el, .ivu-date-picker, .ivu-input-wrapper {
        width: 100%;
    }
</style>
